
<template>
  <div class="details-box">
    <div class='order-container'>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="img in carouselImages" :key="img">
          <img :src="$store.state.imgShowRoad + '/file/' + img" alt="轮播图" />
        </el-carousel-item>
      </el-carousel>
      <!--
    <img
      v-if="data.picture"
      :src="$store.state.imgShowRoad + '/file/' + data.picture"
      alt=""
    />
    <img
      v-else
      src="../assets/img/wutu.gif"
      alt=""
      style="border: 1px solid #f2f2f2"
    /> 
    -->

      <div class="info">
        <h4 class="title">{{ data.title }}</h4>
        <div class="content" :title="data.content">{{ data.content }}</div>
        <span class="price">￥{{ data.price }}</span>
        <div class="time">
          <span style="margin-right: 30px"
            >发布时间：{{ data.createTime | changeTime }}</span
          >
          <span>最近修改时间：{{ data.updateTime | changeTime }}</span>
        </div>
        <div class="item-style">
          <div class="operation">
            <div class="operation-item">
              <img src="../assets/img/good.png" class="operation-img" alt="" />
              点赞
            </div>
            <div class="operation-item">
              <img
                src="../assets/img/no-star.png"
                class="operation-img"
                alt=""
              />
              收藏
            </div>
            <div class="operation-item">
              <img
                src="../assets/img/fill-in.png"
                class="operation-img"
                alt=""
              />评论
            </div>
          </div>
          <div class="btn-content">
            <el-button
              type="danger"
              @click="addShopcartClick"
              v-if="data.type == 'goods'"
              >加入购物车</el-button
            >
            <el-popover placement="right" width="320" trigger="hover">
              <div>
                <div class="item-sales">
                  卖家姓名：<span class="sales-text">{{
                    updateUserData.userName
                  }}</span>
                </div>
                <div class="item-sales">
                  卖家地址：<span class="sales-text">{{
                    updateUserData.address
                  }}</span>
                </div>
                <div class="item-sales">
                  卖家手机号码：<span class="sales-text">{{
                    updateUserData.phone
                  }}</span>
                </div>
                <div class="item-sales">
                  更新时间：<span class="sales-text">{{
                    updateUserData.updateTime | formatTimer
                  }}</span>
                </div>
              </div>
              <el-button
                type="danger"
                slot="reference"
                @click.once="changeInfo(item.orderId)"
                v-show="data.type == 'needs'"
                >联系买家</el-button
              >
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <div class='comment-container'>
      <comment-section class="comments" :orderId="data.orderId"></comment-section>
    </div>
  </div>
</template>

<script>
import { addOrderToCart } from "../api/cart";
import { selectOrderById } from "../api/order";
import ChangeMessage from "../components/ChangeMessage.vue";
import { selectUserByUsername } from "../api/user";
import { getOrderCarousel } from "../api/order";
import CommentSection from "../components/CommentSection.vue";
import { getOrderDiscussList } from "../api/orderDiscuss";

export default {
  components: {
    CommentSection,
  },
  data() {
    return {
      data: [],
      ownerInfo: {},
      userGoods: [],
      updateGoodInfo: {},
      updateUserData: {},
      carouselImages: [],
      commentsData: [],
    };
  },
  filters: {
    changeTime(time) {
      return time.slice(0, 10);
    },
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " ";
    },
  },
  components: { ChangeMessage, CommentSection },
  props: {
    ctype: {
      type: String,
    },
    cdesciibe: {
      type: String,
    },
  },
  methods: {
    fetchComments() {
      getOrderDiscussList()
        .then((response) => {
          if (response.flag && response.code === 20000) {
            this.commentsData = response.data;
          } else {
            console.error("获取评论列表失败:", response.message);
          }
        })
        .catch((error) => {
          console.error("请求评论列表出错:", error);
        });
    },
    toggleReplies(comment) {
      this.$set(comment, "showReplies", !(comment.showReplies || false));
      if (!comment.showReplies && comment.replyComments) {
        // 如果回复数据未加载，则发起请求获取
        comment.replyComments = [];
        getOrderDiscussWithRepliesById(comment.orderDiscussId)
          .then((replyResponse) => {
            if (replyResponse.flag && replyResponse.code === 20000) {
              comment.replyComments = replyResponse.data;
            } else {
              console.error("获取回复列表失败:", replyResponse.message);
            }
          })
          .catch((error) => {
            console.error("请求回复列表出错:", error);
          });
      }
    },
    addShopcartClick() {
      addOrderToCart({
        order_id: this.data.orderId,
      })
        .then((res) => {
          console.log(res);
          if (res.flag == true) {
            alert(res.message);
          } else {
            alert(res.message);
          }
        })
        .catch((err) => {
          alert("添加失败,请先登录");
        });
    },
    changeInfo(item) {
      this.$store.commit("updateChangedOrderId", item);
      selectOrderById({
        order_id: this.$store.state.changedOrderId,
      })
        .then((res) => {
          this.updateGoodInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSalesInfo() {
      selectUserByUsername({
        user_name: this.data.ownName,
      })
        .then((res) => {
          this.updateUserData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getOrderCarouselImages() {
      getOrderCarousel({ id: this.data.orderId })
        .then((response) => {
          if (response.flag && response.code === 20000) {
            this.carouselImages = response.data; // 保存图片数据到新的数据属性
          } else {
            console.error("获取轮播图失败:", response.message);
          }
        })
        .catch((error) => {
          console.error("请求轮播图出错:", error);
        });
    },
  },
  mounted() {
    this.fetchComments();
    selectOrderById({
      order_id: this.$route.query.orderId,
    }).then((res) => {
      if (res.flag == true) {
        this.data = res.data;
        this.getOrderCarouselImages();
        this.getSalesInfo();
      }
    });
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.order-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.comment-container {
  margin-top: 20px;
  width: 100%;
}

.details-box {
  flex-direction: column;
  width: 1100px;
  height: auto;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  .el-carousel {
    width: 360px;
    height: 340px;
    border-radius: 6px;
  }
  .el-carousel__item img {
    width: 100%; /* 设置图片宽度为100%，使其填充轮播图的宽度 */
    height: 100%; /* 设置图片高度为100%，使其填充轮播图的高度 */
    object-fit: cover; /* 确保图片按比例缩放并覆盖整个轮播图区域 */
    border-radius: 6px; /* 如果需要，可以为图片添加圆角 */
  }
  .info {
    position: relative;
    width: 680px;
    height: 300px;
    border: 1px solid #f2f2f2;
    // box-shadow: 3px 3px 3px rgba(3, 0, 0, 0.07);
    border-radius: 6px;
    padding: 10px 20px;
    .title {
      font-size: 22px;
      font-weight: bold;
    }
    .content {
      height: 100px;
      border: 1px dashed #f2f2f2;
      line-height: 23px;
      padding: 5px 10px;
      /*超出的部分隐藏*/
      overflow: hidden;
      /*文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
      /*弹性伸缩盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素显示文本的行数*/
      -webkit-line-clamp: 4;
      /*设置或检索伸缩盒对象的子元素排列方式*/
      -webkit-box-orient: vertical;
    }
    .price {
      color: red;
      font-size: 25px;
      font-weight: bold;
    }
    .time {
      margin-top: 5px;
      color: #999;
      display: flex;
      justify-content: flex-start;
    }
    .item-style {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 5px;
      align-items: center;
    }
  }
  .operation {
    display: flex;
    margin-top: 10px;
    margin-right: 150px;
    .operation-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      .operation-img {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
        border-radius: 6px;
      }
    }
  }
  .btn-content {
    margin-top: 10px;
  }
  .item-sales {
    color: #333 !important;
    line-height: 30px;
    max-height: 30px;
    .sales-text {
      color: #666;
    }
  }
}
</style>